<template>
	<view>
		<view class="content">
			<view class="head">
				<view class="swiper">
					<swiper bindchange="onBindchange">
						<block v-for="(item,index) in swiper" :key="index">
							<swiper-item :data-id="index">
								<!-- <video wx:if="{{swiperId==0}}" id="myVideo" src="{{item}}" controls autoplay="{{true}}"></video> -->
								<image id="merchandise" mode="aspectFit"
									:src="[item!=''?item:'../../../../image/errorImage.jpg']"></image>
							</swiper-item>
						</block>
					</swiper>
				</view>
				<view class="explain type2">
					<view class="explain-v1">
						<text>秒杀</text>
						<text>激情抢购 先到先得</text>
					</view>
				</view>
				<view class="participate">
					<view class="select-title">
						<text>{{seckillData.FName}}</text>
						<button class="select-partic" open-type="share" hover-class="none">
							<image id="participate" src="http://minipos.posyun3721.com/image/marketing/participate.png">
							</image>
							<text>分享</text>
						</button>
					</view>
					<view class="select-price">
						<view class="price">
							<view class="amount">
								<text>¥<text class="money">{{seckillData.FValue}}</text></text>
								<text>原价:¥{{seckillData.FPosPrice}}</text>
							</view>
							<view class="">

							</view>
						</view>
						<view class="select-people">
							<view class="people">
								<image class="people-img"
									src="http://minipos.posyun3721.com/image/marketing/surplus.png">
								</image>
								<text>剩余:{{residuals}}份</text>
							</view>
							<view class="people">
								<image class="people-img"
									src="http://minipos.posyun3721.com/image/marketing/people-img2.png"></image>
								<text>浏览:{{browse}}人</text>
							</view>
							<view class="people">
								<image class="people-img" src="http://minipos.posyun3721.com/image/marketing/user.png">
								</image>
								<text>参与:{{participate}}人</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="spell">
				<view class="imageBox" v-if="uid==''">
					<image class="select-portrait" v-for="(item,index) in usetsArr" :key="index" :src="item.FAvatarUrl">
					</image>
				</view>
				<view class="imageBox" wx:else>
					<image class="select-portrait" :class="[uid==item.FItemID?'':'none']"
						v-for="(item,index) in usersImg" :key="index" :src="item.FAvatarUrl"></image>
				</view>
				<text class="userT">秒杀时间剩下<text class="time">{{days}} 天 {{hours}} 时 {{minutes}} 分 {{seconds}}
						秒</text>后结束</text>
				<view v-if="share==1">
					<button class="type2" id="immediately" v-if="userID==0" @click="onStart" vlaue="">马上抢购</button>
					<button class="type2" id="immediately" v-else-if="userID==1" @click="onWay" vlaue="">马上支付</button>
					<button class="type2" id="immediately" v-else>活动已结束</button>
				</view>
			</view>
			<view class="select-other" :class="[childSet==''?'none':'']" v-if="share==1">
				<view class="other-head" bindtap="onFind" v-if="activiStatus!='不可用'">
					<text>{{participate}}人在参与</text>
					<text class="none">查看更多></text>
				</view>
				<view class="other-box" :class="[(item.GroupQty-item.ActQty)==0?'none':'']"
					v-for="(item,index) in usetsArr" :key="index" :data-id="item.Childid" bindtap="onChilds"
					v-if="activiStatus!='不可用'">
					<view class="initiator">
						<image class="initiator-img" :src="item.FAvatarUrl"></image>
						<text>{{item.FNiName}}</text>
					</view>
					<view class="part">
						<text><text class="time">抢购中</text></text>
						<!-- <button class="part-btu">去砍价</button> -->
					</view>
				</view>
			</view>
			<view wx:else>
				<view class="other-box" v-for="(item,index) in usetsArr" :key="index" :data-id="item.Childid">
					<view class="initiator">
						<image class="initiator-img" :src="item.FAvatarUrl"></image>
						<text>{{item.FNiName}}</text>
					</view>
					<view class="part">
						<text class="time">抢购中</text>
					</view>
				</view>
			</view>

			<view class="select-other none" v-if="share==1">
				<view class="other-head">
					<text>用户评价（115）</text>
					<text style="color: #333;">99.6%好评></text>
				</view>
				<view class="other-box">
					<view class="evaluation">
						<!-- <image class="evaluation-img" src=""></image> -->
						<text>cingcing</text>
						<text>2019.07.04</text>
					</view>
					<text>每次搞活动都过来这家抢，非常划算！</text>
				</view>
			</view>
			<view class="activity" v-if="share==1">
				<view class="activity-head" @tap="onSwitch">
					<text class="activity-text" :class=" [activityTypeID==0?'active1':'']" data-id="0">活动详情</text>
					<text class="activity-text" :class=" [activityTypeID==1?'active1':''] " data-id="1">活动规则</text>
				</view>
				<view class="activity-content">
					{{text}}
				</view>
			</view>
			<!-- <view class="footer Footer" wx:if="{{share==1}}">
    <view class="page-footer">
      <image class="footer-img" src="http://minipos.posyun3721.com/image/marketing/loog.png"></image>
      <text>商拓软件提供技术支持</text>
    </view>
  </view> -->

			<view class="buy" v-if="share==1">
				<view class="buy-choose">
					<!-- <navigator hover-class="none" url="/pages/Marketing/index/index" open-type="switchTab"> -->
					<view class="buy-view" @click="onIndex">
						<image class="buy-img" src="http://minipos.posyun3721.com/image/marketing/index1.png"></image>
						<text>首页</text>
					</view>
					<!-- </navigator> -->
					<view class="buy-view" @click="collect">
						<image class="buy-img" :src="img"></image>
						<text>收藏</text>
					</view>
				</view>
				<view class="buy-button type2">
					<text class="bb-text" v-if="userID==0" @click="onStart">马上抢购</text>
					<text class="bb-text" v-else-if="userID==1" @click="onWay">马上支付</text>
					<text class="bb-text" v-else>活动已结束</text>
				</view>
			</view>
			<view class="service none" v-if="share==1">
				<text>客服</text>
			</view>
		</view>

		<!-- <image :class="music [musicUrl==''?'none':'']" id="musicUrl" :src="musicImgUrl" mode='aspectFill'
			bindtap="onMusic"></image> -->

		<!-- <view class="modal" :class=" [isBeGranted==0?'':'none']">
			<view class="title1">申请获取您的用户信息</view>
			<button class="btn" open-type="getUserInfo" bindgetuserinfo="getUserInfo">确定</button>
		</view> -->
		<!-- <view class="mask" :class=" [isBeGranted==0?'':'none']"></view> -->

		<dialog :class="[FPhone==0?'':'none']" id='dialog' bind:confirmEvent='confirmEvent'
			bind:bindgetphonenumber='bindgetphonenumber'>
		</dialog>
	</view>
</template>

<script>
	const app = getApp();
	let seckillChildId = '', //子活动的id
		seckillacid = '', //活动id 
		usersData = '', //参活动的用户的内容
		tiemDate = ''; //活动结束的时间
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				id: 0, //活动的3种模式；0=> 拼团 1=> 秒杀 2=> 砍价 //底部导航按钮的2种模式;1=>秒杀模式 2=>砍价模式
				share: 1, //是否是分享链接进来的
				AcChild: 0, //子类活动查询,加入子拼团
				uid: '', //分享人的id
				isBeGranted: 1, //授权登录状态码
				FPhone: 1, //手机授权登录状态码
				activityTypeID: 0, //活动类型的样式 0=>活动详情 1=>活动规则
				days: 0, //时间
				hours: 0,
				minutes: 0,
				seconds: 0,
				seckillData: '', //主活动内容
				childSet: '', //子活动的内容
				residuals: '', //剩余数量
				browse: '', //浏览人数
				participate: '', //参与人数
				activiStatus: '',
				text: '', //活动规则和活动说明
				swiper: '', //图片
				NeedPay: '', //
				usersPrice: '', //
				userID: '', //
				usersImg: '',
				coll: true, // 
				img: 'http://minipos.posyun3721.com/image/marketing/collect1.png', //
				distributor: '', //分销人员id
				musicUrl: '', //背景音乐地址
				musicImgUrl: '../../../images/music.gif',
				musics: true, //背景音乐播放的状态
				TimeOut: '', //定时器
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {

			//console.log('options', options,app.appdata)
			//记录0=>主页 1=>详情页
			uni.setStorageSync('Recordid', 1);
			//记录该活动时间是否已过期
			uni.removeStorageSync('timeOut');
			uni.showLoading({
				title: '加载中......',
			})
			// app.appdata ={
			//   activity:{
			//     goodsId: 16226,
			//     groupId: 75,
			//     id: 1,
			//   },
			//   scan:{
			//     FItemID: '1',
			//     parentID:'',
			//     hostid: '2',
			//     PagePath: 'Marketing',
			//   }
			// }
			var self = this;
			let activitData = '';
			// activitData = app.appdata.activity||'';
			if (activitData != '') {
				// activitData = app.appdata.activity;
				// let scan = app.appdata.scan;
				// seckillacid = activitData.groupId;
				// this.setData({
				//   id: activitData.id,
				//   share: 1,
				// })
				// uni.setStorageSync('GoodsId', activitData.goodsId);
				// uni.setStorageSync('options',scan);//登录时需要记录的入口参数
				// this.login(activitData.groupId)
			} else {

				if (options) {

					if (options.AcChild) {
						seckillChildId = options.ChildId;
						seckillacid = options.Acid;
						this.id = options.id;
						this.AcChild = options.AcChild;
						this.callback(options.Acid);
					} else {
						if (options.share !== 0) {
							let shar = '';
							if (options.Sharedata) {
								shar = options.Sharedata;
								shar = JSON.parse(shar); //分享链接传递过来的参数
								uni.setStorageSync('GoodsId', shar.GoodsId);
								uni.setStorageSync('lastHostid', shar.hostid);
								uni.setStorageSync('FItemID', shar.fItemID);
								uni.setStorageSync('stockId', shar.fItemID);
								let option = {
									FItemID: shar.fItemID,
									stockId: shar.fItemID,
									hostid: shar.hostid,
									PagePath: 'Marketing'
								};
								uni.setStorageSync('options', option);
							}
							//console.log('shar',shar);
							if (shar.distributor !== undefined) {
								seckillacid = shar.groupId;
								// this.setData({
								// 	id: shar.id,
								// 	distributor: shar.distributor,
								// 	share: 1,
								// })
								this.id = shar.id;
								this.distributor = shar.distributor;
								this.share = 1;

							} else {
								seckillacid = options.groupId || shar.groupId;
								// this.setData({
								// 	id: options.id || shar.id,
								// 	share: 1,
								// })
								this.id = options.id || shar.id;
								this.share = 1;
							}
							var loginId = uni.getStorageSync('LoginID');
							if (loginId == 1) {
								this.callback(seckillacid)
							} else {
								this.login(seckillacid)
							}
						}
					}
				}
			}
			//console.log(this.data.uid)
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			var loginId = uni.getStorageSync('LoginID');
			if (loginId == 1) {
				var phoneID = uni.getStorageSync('PhoneID');
				this.FPhone = phoneID;
			}
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {
			if (this.musics == true) {
				this.musics = false;
			}
			//离开当前页面时，把wx.createInnerAudioContext()的实例去掉/销毁
			innerAudioContext.stop();
		},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {
			//离开当前页面时，把wx.createInnerAudioContext()的实例去掉/销毁
			innerAudioContext.destroy();
			clearTimeout(this.TimeOut);
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			let Sharedata = this.$util.onShare(),
				share = Sharedata.share;
			// uni.showToast({
			// 	title:'参数'
			// })
			if (this.distributor != '') {
				Sharedata.distributor = this.distributor;

			} else {
				Sharedata.distributor = '';
			}
			let GoodsId = uni.getStorageSync('GoodsId')
			Sharedata.GoodsId = GoodsId
			Sharedata = JSON.stringify(Sharedata);
			// console.log(Sharedata, share)
			debugger
			return {
				title: '快来秒杀吧',
				path: '/pages/Marketing/index/select/select2/select2?Sharedata=' + Sharedata + '&share=' + share,
			}
			// const promise = new Promise(resolve => {
			// 	setTimeout(() => {
			// 		resolve({
			// 			title: '快来秒杀吧'
			// 		})
			// 	}, 2000)
			// })
			// return {
			// 	title: '快来秒杀吧',
			// 	path: '/pages/Marketing/index/select/select2/select2?Sharedata=' + Sharedata + '&share=' + share,
			// 	promise
			// }
		},
		methods: {

			//发起子拼团活动,先判断活动是否可用
			onStart: function(options) {

				let url = '';
				let data = {};
				//记录该活动时间是否已过期
				let timeOut = uni.getStorageSync('timeOut');
				if (timeOut == 1) {
					uni.showModal({
						title: '活动提示',
						content: '该活动已结束，请重新选择活动参与',
					})
				} else {
					//参加活动（下单）
					url = 'Sale/SecGoods';
					let GoodsId = uni.getStorageSync('GoodsId'); //秒杀商品id
					data = {
						secid: seckillacid, //秒杀活动id
						goodsid: GoodsId, //秒杀商品id
						prowxid: this.distributor
					};
					this.ads(url, data);
				}
			},
			//活动详情
			callback: function(acid) {
				this.$util.GetTitle();
				let Seckillgroup = {
					AcChild: this.AcChild,
					id: this.id,
					uid: this.uid,
					activityTypeID: this.activityTypeID,
					share: this.share,
				}
				let GoodsId = uni.getStorageSync('GoodsId');
				this.$util.add('Sale/GetSeckillDtl', {
					acid: acid,
					goodsid: GoodsId
				}, Seckillgroup).then(res => {
					//console.log(res);
					let Seckilldata = res;
					seckillChildId = Seckilldata.childId; //子活动的id
					seckillacid = Seckilldata.groupId; //团购id
					usersData = Seckilldata.usersData; //参活动的用户的内容
					tiemDate = Seckilldata.tiemDate; //活动结束的时间
					this.seckillData = Seckilldata.goodsData; //主活动内容
					// childSet: Seckilldata.childSet,//子活动的内容
					this.residuals = Seckilldata.residuals; //剩余数量
					this.browse = Seckilldata.browse; //浏览人数
					this.participate = Seckilldata.participate; //参与人数
					// activiStatus: Seckilldata.activiStatus,
					this.text = Seckilldata.text; //活动规则和活动说明
					this.swiper = Seckilldata.swiper; //图片

					this.userID = Seckilldata.NeedPay; //是否参加活动没有支付
					// usetsArr: Seckilldata.usetsArr,//
					this.coll = Seckilldata.coll;
					this.img = Seckilldata.collImg;
					setTimeout(() => {
						// this.setData({
						// 	musicUrl: Seckilldata.FMusicUrl, //
						// })
						this.musicUrl = Seckilldata.FMusicUrl;
						//自动播放背景音乐
						innerAudioContext.src = Seckilldata.FMusicUrl;
						innerAudioContext.autoplay = true;
						innerAudioContext.loop = true;
						innerAudioContext.play();
					}, 600)
					this.onCountdown(tiemDate);
				}).catch(error => {
					//console.log(error);
				});
				uni.hideLoading();
			},

			//砍价、秒杀直接下单，订单成功之后才去支付
			ads: function(url, data) {
				let self = this,
					datas = self.seckillData;
				datas = JSON.stringify(datas);
				//请求
				// app.util.post(url, data).then(res => {
				this.$util.util(url, data, 'POST').then(res => {
					//console.log(res)
					//1秒杀，2砍价,0.1参加子拼团，0创建子拼团  
					if (res.status != 0) {
						//秒杀
						uni.navigateTo({
							url: '/pages/Marketing/index/pay/pay?id=' + this.id + '&goodsData=' +
								datas + '&addressId=0',
						})
						this.userID = 1;
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
						})
					}
				}).catch(error => {
					//console.log(error);
					uni.showToast({
						title: error.data.data,
						icon: 'none',
						duration: 2000,
					})
				})
			},
			//子拼团的跳转
			onChilds: function(e) {
				let id = e.currentTarget.dataset.id;
				// select.onChilds(id);
			},
			//支付
			onWay: function() {
				let self = this,
					datas = self.seckillData,
					ChildId = datas.FRangeExt;
				//console.log(datas);
				datas = JSON.stringify(datas);
				let token = uni.getStorageSync('Token'); //Token值
				uni.request({
					url: this.$Url + 'sale/CheckTokenLogin',
					data: '',
					method: 'POST',
					header: {
						'token': token,
						'cookie': uni.getStorageSync('Cookies'),
					},
					success: (res) => {
						let id = uni.getStorageSync('LoginID');
						if (res.data.msg == 'success' && id == 1) {
							uni.navigateTo({
								url: '/pages/Marketing/index/pay/pay?id=1&goodsData=' + datas +
									'&childType=0&addressId=0',
							})
						}else{
							uni.showModal({
								title: '提示',
								content: '尚未登录，是否先前去登录',
								success: (res) => {
									if (res.confirm) {
										uni.navigateTo({
											url: `/pages/public/login`
										})
									}
								}
							})
						}
					}
				})

			},

			//倒计时
			onCountdown: function(endDateStr) {
				var self = this;
				var data = this.$util.onCountdown(endDateStr);
				if (data != '') {
					// this.setData({
					//   days: data.days,
					//   hours: data.hours,
					//   minutes: data.minutes,
					//   seconds: data.seconds
					// })
					this.days = data.days;
					this.hours = data.hours;
					this.minutes = data.minutes;
					this.seconds = data.seconds;
					if (data.type == 1) {
						clearTimeout(this.TimeOut)
					} else {
						//延迟一秒执行自己
						this.TimeOut = setTimeout(function() {
							self.onCountdown(endDateStr);
						}, 1000)
					}
				}
			},

			login(id) {
				wx.login({
					success: res => {
						this.$util.Login(res.code).then(res => {
							if (res == 1) {
								this.callback(id)
							} else {
								this.isBeGranted = 0;
							}
						}).catch(error => {

							console.log(error)
						});
					}
				})
			},
			//返回首页
			onIndex: function() {
				uni.reLaunch({
					url: '/pages/Marketing/index/index',
				})
			},
			//收藏
			collect: function() {
				var self = this;
				if (this.coll) {
					self.img = 'http://minipos.posyun3721.com/image/marketing/collect2.png';
					self.coll = false;
				} else {
					self.img = 'http://minipos.posyun3721.com/image/marketing/collect1.png';
					self.coll = true;
				}
				let goods = this.seckillData,
					goodsid = seckillacid,
					id = this.id,
					actype = '';
				id == 1 ? actype = 2 : '';
				this.$util.util('Sale/SaveMemberCollect', {
					acid: goodsid, //活动id
					actype: actype, //活动类型
					goodsid: goods.FRangeExt, //商品id
					imgurl: goods.FImages, //商品图片
					title: goods.FName, //标题
				}, 'POST').then(res => {
					//console.log(res);
				});
			},
			//暂停音乐
			onMusic() {
				if (this.musics === true) {
					innerAudioContext.pause(); //暂停音乐
				} else {
					innerAudioContext.play(); //暂停音乐
				}
				this.musics = !this.musics;
			}, //导航的切换
			onSwitch: function(e) {
				//console.log(e)
				let data = this.seckillData,
					id = e.target.dataset.id;
				let Text = id == 0 ? data.FIntro : data.FRuleIntro;
				this.activityTypeID = id;
				this.text = Text;
			},
		}
	}
</script>

<style lang='scss'>
	@import url("../../../../../common/app.wxss");

	view,
	scroll-view,
	swiper,
	swiper-item,
	cover-view,
	cover-image,
	icon,
	text,
	rich-text,
	progress,
	button,
	checkbox,
	form,
	input,
	label,
	radio,
	slider,
	switch,
	textarea,
	navigator,
	audio,
	camera,
	image,
	video {
		-webkit-box-sizing: border-box;
		box-sizing: initial;
	}

	.content {
		width: 100%;
		height: auto;
	}

	.head {
		width: 100%;
		height: auto;
		background-color: #fff;
		border-bottom: 20rpx solid #F6F6F6;
	}

	.userT {
		margin-bottom: 0px;
		font-size: 16px;
		display: block;
		text-align: center;
	}

	.music {
		position: fixed;
		top: 100rpx;
		right: 50rpx;
		width: 80rpx;
		height: 80rpx;
	}
</style>
